import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { Input, Row, Col } from 'antd';
import marked from 'marked';
import highlight from '@/utils/highlight';

export interface MarkdownProps {
  getContents: () => string;
  setContents: (contents: string) => void;
}

interface Props {
  status?: [number, number];
}

const Markdown = forwardRef<MarkdownProps, Props>(({ status = [0, 24] }, ref) => {
  const [html, setHtml] = useState('');

  useImperativeHandle(ref, () => ({
    getContents: () => html,
    setContents: (contents: string) => setHtml(contents),
  }));

  useEffect(() => {
    marked.setOptions({ highlight });
  }, []);

  return (
    <Row gutter={16}>
      <Col span={status[0]}>
        <Input.TextArea
          placeholder="请输入笔记内容..."
          autoSize={{ minRows: 30 }}
          style={{ fontSize: 16 }}
          value={html}
          onChange={e => setHtml(e.currentTarget.value)}
        />
      </Col>
      <Col span={status[1]}>
        <article className="markdown-body" dangerouslySetInnerHTML={{ __html: marked(html) }} />
      </Col>
    </Row>
  );
});

export default Markdown;
